<template>
  <div
    class="tag"
    v-bind:class="{ hover: ishover }"
    @mouseenter="
      () => {
        this.ishover = true;
      }
    "
    @mouseleave="
      () => {
        this.ishover = false;
      }
    "
  >
    <Checkbox>{{ title }}</Checkbox>
    <div>
      <Icon
        v-if="ishover"
        size="16"
        style="cursor: pointer; margin: 0"
        type="ios-create-outline"
      />
      <Icon
        v-if="ishover"
        size="16"
        style="cursor: pointer; margin: 0"
        type="ios-trash-outline"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "OptionTag",
  props: ["title"],
  data() {
    return {
      ishover: false,
    };
  },
};
</script>

<style lang="less">
.tag {
  width: 148px;
  height: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-radius: 13px;
  padding-right: 10px;
  padding-left: 14px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 1);
  &.hover {
    background: rgba(235, 245, 255, 1);
    color: #1d86f0;
  }
}
</style>